<template>
  <div class="container">
    <el-card class="box-card">
      <div class="text item">
        <div class="shuoming">
          <span>说明：目前支持学科和关键字条件筛选</span>
          <el-button
            type="success"
            size="small"
            icon="el-icon-edit"
            @click="xinzengshiti"
          >
            新增试题
          </el-button>
        </div>
        <!-- 第一行输入框 -->
        <div class="shurukuang">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <span>学科{{ xuekes }}</span>
                <template>
                  <el-select
                    v-model="xuekes"
                    placeholder="请选择"
                    @change="xuekeChange"
                  >
                    <el-option
                      :value="item.label"
                      :key="item.value"
                      v-for="item in options"
                    >
                    </el-option>
                  </el-select>
                </template>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <span>二级目录</span>
                <template>
                  <el-select
                    v-model="erjimulus"
                    placeholder="请选择"
                    @change="erjiChange"
                  >
                    <el-option
                      :value="item.label"
                      :key="item.value"
                      v-for="item in erjimulu"
                    >
                    </el-option>
                  </el-select>
                </template>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <span>标签</span>
                <template>
                  <el-select v-model="biaoqians" placeholder="请选择" clearable>
                    <el-option
                      :value="item.label"
                      :key="item.value"
                      v-for="item in biaoqain"
                    >
                    </el-option>
                  </el-select>
                </template>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form ref="form" :model="form">
                  <el-form-item>
                    <span>关键字</span>
                    <el-input
                      v-model="guanjianzi"
                      class="input"
                      placeholder="根据题干搜索"
                    ></el-input>
                  </el-form-item>
                </el-form>
              </div>
            </el-col>
          </el-row>
        </div>
        <!-- /第一行输入框 -->
        <!-- 第二行输入框 -->
        <div class="shurukuang2">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <span>试题类型</span>
                <template>
                  <el-select v-model="shitileixings" placeholder="请选择">
                    <el-option
                      :value="item.label"
                      :key="item.value"
                      v-for="item in shitileixing"
                    ></el-option>
                  </el-select>
                </template>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <span>难度</span>
                <template>
                  <el-select v-model="nandus" placeholder="请选择">
                    <el-option
                      :value="item.label"
                      :key="item.value"
                      v-for="item in nandu"
                    >
                    </el-option>
                  </el-select>
                </template>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <span>方向</span>
                <template>
                  <el-select v-model="fangxiangs" placeholder="请选择">
                    <el-option
                      :value="item"
                      :key="index"
                      v-for="(item, index) in fangxiang"
                    >
                    </el-option>
                  </el-select>
                </template>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <span>录入人</span>
                <template>
                  <el-select v-model="lururens" placeholder="请选择">
                    <el-option
                      :value="item.username"
                      :key="item.id"
                      v-for="item in lururen"
                    >
                    </el-option>
                  </el-select>
                </template>
              </div>
            </el-col>
          </el-row>
        </div>
        <!-- /第二行输入框 -->
        <!-- 第三行输入框 -->
        <div class="wenbenkuang">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form ref="form" :model="form">
                  <el-form-item>
                    <span>题目备注</span>
                    <el-input v-model="timubeizhu" class="input"></el-input>
                  </el-form-item>
                </el-form>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form ref="form" :model="form">
                  <el-form-item>
                    <span>企业简称</span>
                    <el-input v-model="qiyejiancheng" class="input"></el-input>
                  </el-form-item>
                </el-form>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <span>城市</span>
                <template class="wenbenkuang_shurukuang">
                  <el-select
                    v-model="shiqu"
                    placeholder="请选择"
                    @change="shiquChange"
                  >
                    <el-option
                      :value="item"
                      :key="index"
                      v-for="(item, index) in chengshi"
                    >
                    </el-option>
                  </el-select>
                  <el-select v-model="xianqu" placeholder="请选择">
                    <el-option
                      :value="item"
                      :key="index"
                      v-for="(item, index) in diqu"
                    >
                    </el-option>
                  </el-select>
                </template>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-button size="mini" @click="qingchu">清除</el-button>
                <el-button type="primary" size="mini" @click="sosuo"
                  >搜索</el-button
                >
              </div>
            </el-col>
          </el-row>
        </div>
        <!-- /第三行输入框 -->
      </div>
      <!-- 列表 -->
      <div class="liebiao">
        <template>
          <el-tabs v-model="activeName" type="card">
            <el-alert
              :title="`数据一共${total}条`"
              type="info"
              show-icon
              :closable="false"
            >
            </el-alert>
            <!-- 标题 -->
            <el-table style="width: 100%" :data="xiangqing">
              <el-table-column prop="number" label="试题编号" width="150">
              </el-table-column>
              <el-table-column prop="subject" label="学科" width="120">
              </el-table-column>
              <el-table-column prop="catalog" label="目录" width="120">
              </el-table-column>
              <!-- <el-table-column prop="questionType" label="题型" width="120"> -->
              <el-table-column label="题型" width="120">
                <template slot-scope="scope">
                  <span>{{
                    questionType[scope.row.questionType - 1].label
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="题干" width="300">
                <template slot-scope="scope">
                  <span v-html="scope.row.question"></span>
                </template>
              </el-table-column>
              <el-table-column label="录入时间" width="200">
                <template slot-scope="scope">{{
                  scope.row.addDate | parseTimeByString
                }}</template>
              </el-table-column>
              <el-table-column label="难度" width="120">
                <template slot-scope="scope">
                  <span>{{ difficulty[scope.row.difficulty - 1].label }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="creator" label="录入人" width="120">
              </el-table-column>
              <el-table-column label="审核状态" width="120">
                <template slot-scope="scope">
                  <span>{{ chkType[+scope.row.chkState].label }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="chkRemarks" label="审核意见" width="120">
              </el-table-column>
              <el-table-column prop="chkUser" label="审核人" width="120">
              </el-table-column>
              <el-table-column prop="publishState" label="发布状态" width="120">
                <template slot-scope="scope">
                  <span>{{
                    publishType[scope.row.publishState + 0].label
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="200"
                class="wenzi"
              >
                <!-- 按钮 -->
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    @click="yulan(scope.row.id)"
                    >预览</el-button
                  >
                  <el-button
                    type="text"
                    size="small"
                    :disabled="scope.row.chkState == 0 ? false : true"
                    @click="dialogShenhe = true"
                    >审核</el-button
                  >
                  <el-button
                    type="text"
                    size="small"
                    :disabled="scope.row.publishState == 0 ? false : true"
                    @click="xiugai(scope.row)"
                    >修改</el-button
                  >
                  <el-button
                    type="text"
                    size="small"
                    v-html="scope.row.publishState == 0 ? '上架' : '下架'"
                    @click="shangxiajia(scope.row)"
                  ></el-button>
                  <el-button
                    type="text"
                    size="small"
                    :disabled="scope.row.publishState == 0 ? false : true"
                    @click="shanchu(scope.row.id)"
                    >删除</el-button
                  >
                </template>
                <!-- /按钮 -->
              </el-table-column>
            </el-table>
            <!-- /标题 -->
            <el-tab-pane label="全部" name="first"></el-tab-pane>
            <el-tab-pane label="待审核" name="second"></el-tab-pane>
            <el-tab-pane label="已审核" name="third"></el-tab-pane>
            <el-tab-pane label="已拒绝" name="fourth"></el-tab-pane>
          </el-tabs>
        </template>
      </div>
      <!-- /列表 -->
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="request.pagesize"
          :current-page="request.page"
          :page-sizes="[5, 10, 20, 50]"
          layout="prev, pager, next, sizes, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <!-- /分页 -->
      <!-- 新增预览弹层 -->
      <el-dialog
        class="elDialog"
        title="题目预览"
        width="50%"
        :visible.sync="dialogVisible"
        v-for="item in xiangqing"
        :key="item.id"
      >
        <viewQuestionItem
          :viewItemId="currentID"
          @close="dialogVisible = false"
          v-if="dialogVisible"
        />
      </el-dialog>
      <!-- 审核弹出层 -->
      <el-dialog title="题目审核" :visible.sync="dialogShenhe" width="20%">
        <span>
          <template>
            <el-radio v-model="radio" label="1">通过</el-radio>
            <el-radio v-model="radio" label="2">拒绝</el-radio>
          </template>
        </span>
        <el-input
          type="textarea"
          :rows="3"
          placeholder="请输入审核意见"
          v-model="textarea"
        >
        </el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogShenhe = false">取 消</el-button>
          <el-button type="primary" @click="shenhequeding">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects'
import {
  questionType,
  difficulty,
  direction,
  chkType,
  publishType
} from '@/api/hmmm/constants'
import { simple as lururens } from '@/api/base/users'
import { provinces, citys } from '@/api/hmmm/citys'
import { choice, remove, choicePublish, detail } from '@/api/hmmm/questions'
import { simple as rejimulu } from '@/api/hmmm/directorys'
import { simple as biaoqian } from '@/api/hmmm/tags'
import viewQuestionItem from '@/module-hmmm/components/viewQuestionItem.vue'

export default {
  name: 'questionsChoice',
  components: { viewQuestionItem },

  data() {
    return {
      value: '',
      form: {},
      activeName: 'first',
      options: [],
      shitileixing: [],
      questionType,
      nandu: [],
      fangxiang: [],
      lururen: [],
      chengshi: [],
      diqu: [],
      xiangqing: [],
      shiqu: '',
      xianqu: '',
      xuekes: '',
      erjimulu: [],
      erjimulus: '',
      biaoqain: [],
      biaoqians: '',
      difficulty,
      chkType,
      publishType,
      total: 0,
      dialogVisible: false,
      dialogShenhe: false,
      textarea: '',
      radio: '1',
      qiyejiancheng: '',
      timubeizhu: '',
      guanjianzi: null,
      biaoqian: '',
      shitileixings: '',
      nandus: '',
      fangxiangs: '',
      lururens: '',
      id: '',
      // xiugai: false,
      request: {
        page: 1,
        counts: 100,
        pagesize: 5,
        pages: 1,
        keyword: null
      },
      currentID: null,
      public: [0, 1],
      publishState: ''
    }
  },
  created() {
    this.xueke()
    this.xialakuang()
    this.luruern()
    this.chengshis()
    this.xiangqings({
      pagesize: this.request.pagesize,
      page: this.request.page,
      keyword: this.guanjianzi
    })
  },
  computed: {},
  methods: {
    // 学科下拉框数据
    async xueke() {
      const { data } = await simple()
      this.options.push(...data)
    },
    xialakuang() {
      this.shitileixing = questionType
      this.nandu = difficulty
      this.fangxiang = direction
    },
    async luruern() {
      const data = await lururens()
      this.lururen.push(...data.data)
    },
    chengshis() {
      this.chengshi = provinces()
    },
    // 详情
    async xiangqings(params) {
      // console.log(params)
      const { data } = await choice(params)
      this.xiangqing = data.items
      this.total = data.counts
    },
    // 城市
    shiquChange() {
      const isthis = this
      this.chengshi.forEach(function(item, index) {
        if (item === isthis.shiqu) {
          isthis.diqu = citys(item)
          // console.log(isthis.diqu)
          isthis.xianqu = ''
        }
      })
    },
    xuekeChange() {
      const isthis = this
      // console.log(this)
      this.options.forEach(async function(item, index) {
        isthis.erjimulu = []
        if (item.label === isthis.xuekes) {
          // console.log(item === isthis.xuekes)
          const { data } = await rejimulu({
            subjectID: item.value
          })
          // console.log(data)
          isthis.erjimulu.push(...data)
          // console.log(isthis.erjimulu)
          isthis.erjimulus = ''
        }
      })
    },
    erjiChange() {
      const isthis = this
      this.erjimulu.forEach(async function(item, index) {
        isthis.biaoqain = []
        if (item.label === isthis.erjimulus) {
          const { data } = await biaoqian({
            subjectID: item.value
          })
          // console.log(data)
          isthis.biaoqain.push(...data)
        }
      })
    },
    // // 每页显示信息条数
    handleSizeChange(params) {
      this.request.pagesize = params
      // console.log(this.request.pagesize)
      this.xiangqings({
        pagesize: this.request.pagesize
      })
    },
    // 进入某一页
    handleCurrentChange(params) {
      this.request.page = params
      // console.log(this.request.page)
      this.xiangqings({
        page: this.request.page,
        pagesize: this.request.pagesize
      })
    },
    // 新增试题
    xinzengshiti() {
      this.$router.push('/questions/new')
    },
    // 清除
    qingchu() {
      this.xuekes = ''
      this.erjimulus = ''
      this.biaoqian = ''
      this.guanjianzi = ''
      this.shitileixings = ''
      this.nandus = ''
      this.fangxiangs = ''
      this.lururens = ''
      this.timubeizhu = ''
      this.qiyejiancheng = ''
      this.shiqu = ''
      this.xianqu = ''
      this.xiangqings({
        pagesize: this.request.pagesize
      })
    },
    // 搜索
    async sosuo() {
      await choice(this.request)
      this.xiangqings({
        page: this.request.page,
        pagesize: this.request.pagesize,
        keyword: this.guanjianzi
      })
    },
    // 预览
    async yulan(id) {
      const { data: res } = await detail({ id })
      this.currentID = res.id
      console.log(this.currentID)
      // this.questionInfo = res
      this.dialogVisible = true
    },
    // 下架
    async shangxiajia(item) {
      // console.log(item)
      this.publishState = item.publishState
      const flag = await this.$confirm(
        '您确认上架这道题目吗?, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消上架'
        })
      })
      // console.log(flag, 456)
      if (flag === 'confirm') {
        await choicePublish({
          id: item.id,
          publishState: item.publishState > 0 ? 0 : 1
        })
        this.xiangqings()
      }
    },
    async shanchu(id) {
      const flag = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      // console.log(flag)
      if (flag === 'confirm') {
        remove({ id })
        this.xiangqings()
      }
    },
    shenhequeding() {
      this.dialogShenhe = false
    },
    // 修改
    async xiugai(item) {
      console.log(item.id)
      this.$router.push({ path: '/questions/new', query: { id: item.id } })
    }
  }
}
</script>

<style scoped lang="less">
.container {
  .box-card {
    margin: 10px;
  }
  .shuoming {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    span {
      font-size: 12px;
      color: #ffc0cb;
    }
  }
  /deep/.shurukuang2 {
    margin-bottom: 15px;
    text-align: right;
    .grid-content {
      span {
        margin-right: 10px;
        font-size: 14px;
      }
      .el-input--medium {
        width: 250px;
      }
    }
  }
  /deep/.shurukuang {
    margin: 0px;
    text-align: right;
    .grid-content {
      span {
        margin-right: 10px;
        font-size: 14px;
      }
      .el-input--medium {
        width: 250px;
      }
    }
  }
  /deep/.wenbenkuang {
    text-align: right;
    .input {
      width: 250px;
    }
    .el-form-item__label {
      font-size: 14px;
    }
    .el-select {
      width: 120px;
      margin-left: 10px;
    }
    span {
      font-size: 14px;
    }
    .el-form-item__label {
      font-weight: 400;
    }
    span {
      margin-right: 10px;
      font-size: 14px;
    }
  }
  /deep/.liebiao {
    .grid-content {
      height: 35px;
      background-color: #f4f4f5;
      border-radius: 5px;
      line-height: 35px;
      font-size: 14px;
      padding-left: 15px;
      color: #909399;
    }
  }
  /deep/.block {
    text-align: right;
    margin-top: 20px;
  }
  /deep/.elDialog {
    .shangbian {
      height: 72px;
      div {
        float: left;
        width: 25%;
        padding: 10px 0;
      }
    }
  }
  .el-textarea {
    margin-top: 15px;
  }
}
</style>
